<template>
  <div class="core-main-wrap">
    工作台
    <div style="margin-bottom: 10px">
      <el-date-picker
        v-model="value1"
        type="datetime"
        placeholder="Select date and time"
      />
    </div>
    <div style="margin-bottom: 10px">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
    </div>
    <div style="margin-bottom: 10px">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </div>
    <div style="margin-bottom: 10px">
      <el-button loading>Default</el-button>
      <el-button loading type="primary">Primary</el-button>
      <el-button loading type="success">Success</el-button>
      <el-button loading type="info">Info</el-button>
      <el-button loading type="warning">Warning</el-button>
      <el-button loading type="danger">Danger</el-button>
    </div>
    <div style="margin-bottom: 10px">
      <el-button disabled>Default</el-button>
      <el-button disabled type="primary">Primary</el-button>
      <el-button disabled type="success">Success</el-button>
      <el-button disabled type="info">Info</el-button>
      <el-button disabled type="warning">Warning</el-button>
      <el-button disabled type="danger">Danger</el-button>
    </div>
    <div style="margin-bottom: 10px">
      <el-button loading disabled>Default</el-button>
      <el-button loading disabled type="primary">Primary</el-button>
      <el-button loading disabled type="success">Success</el-button>
      <el-button loading disabled type="info">Info</el-button>
      <el-button loading disabled type="warning">Warning</el-button>
      <el-button loading disabled type="danger">Danger</el-button>
    </div>
    <div style="margin-bottom: 10px">
      <el-button link>Default</el-button>
      <el-button link type="primary">Primary</el-button>
      <el-button link type="success">Success</el-button>
      <el-button link type="info">Info</el-button>
      <el-button link type="warning">Warning</el-button>
      <el-button link type="danger">Danger</el-button>
    </div>
    <div style="margin-bottom: 10px">
      <el-button link loading>Default</el-button>
      <el-button link loading type="primary">Primary</el-button>
      <el-button link loading type="success">Success</el-button>
      <el-button link loading type="info">Info</el-button>
      <el-button link loading type="warning">Warning</el-button>
      <el-button link loading type="danger">Danger</el-button>
    </div>
    <div style="margin-bottom: 10px">
      <el-button link disabled>Default</el-button>
      <el-button link disabled type="primary">Primary</el-button>
      <el-button link disabled type="success">Success</el-button>
      <el-button link disabled type="info">Info</el-button>
      <el-button link disabled type="warning">Warning</el-button>
      <el-button link disabled type="danger">Danger</el-button>
    </div>
    <div style="margin-bottom: 10px">
      <el-button link disabled loading>Default</el-button>
      <el-button link disabled loading type="primary">Primary</el-button>
      <el-button link disabled loading type="success">Success</el-button>
      <el-button link disabled loading type="info">Info</el-button>
      <el-button link disabled loading type="warning">Warning</el-button>
      <el-button link disabled loading type="danger">Danger</el-button>
    </div>
    <div style="margin-bottom: 10px">
      <el-button text>Default</el-button>
      <el-button text type="primary">Primary</el-button>
      <el-button text type="success">Success</el-button>
      <el-button text type="info">Info</el-button>
      <el-button text type="warning">Warning</el-button>
      <el-button text type="danger">Danger</el-button>
    </div>
    <div style="margin-bottom: 10px">
      <el-button text loading>Default</el-button>
      <el-button text loading type="primary">Primary</el-button>
      <el-button text loading type="success">Success</el-button>
      <el-button text loading type="info">Info</el-button>
      <el-button text loading type="warning">Warning</el-button>
      <el-button text loading type="danger">Danger</el-button>
    </div>
    <div style="margin-bottom: 10px">
      <el-button text disabled>Default</el-button>
      <el-button text disabled type="primary">Primary</el-button>
      <el-button text disabled type="success">Success</el-button>
      <el-button text disabled type="info">Info</el-button>
      <el-button text disabled type="warning">Warning</el-button>
      <el-button text disabled type="danger">Danger</el-button>
    </div>
    <div style="margin-bottom: 10px">
      <el-button text loading disabled>Default</el-button>
      <el-button text loading disabled type="primary">Primary</el-button>
      <el-button text loading disabled type="success">Success</el-button>
      <el-button text loading disabled type="info">Info</el-button>
      <el-button text loading disabled type="warning">Warning</el-button>
      <el-button text loading disabled type="danger">Danger</el-button>
    </div>
    <div style="margin-bottom: 10px">
      <el-button text bg>Default</el-button>
      <el-button text bg type="primary">Primary</el-button>
      <el-button text bg type="success">Success</el-button>
      <el-button text bg type="info">Info</el-button>
      <el-button text bg type="warning">Warning</el-button>
      <el-button text bg type="danger">Danger</el-button>
    </div>
    <div style="margin-bottom: 10px">
      <el-button text bg loading>Default</el-button>
      <el-button text bg loading type="primary">Primary</el-button>
      <el-button text bg loading type="success">Success</el-button>
      <el-button text bg loading type="info">Info</el-button>
      <el-button text bg loading type="warning">Warning</el-button>
      <el-button text bg loading type="danger">Danger</el-button>
    </div>
    <div style="margin-bottom: 10px">
      <el-button text bg disabled>Default</el-button>
      <el-button text bg disabled type="primary">Primary</el-button>
      <el-button text bg disabled type="success">Success</el-button>
      <el-button text bg disabled type="info">Info</el-button>
      <el-button text bg disabled type="warning">Warning</el-button>
      <el-button text bg disabled type="danger">Danger</el-button>
    </div>
    <div style="margin-bottom: 10px">
      <el-button text bg disabled loading>Default</el-button>
      <el-button text bg disabled loading type="primary">Primary</el-button>
      <el-button text bg disabled loading type="success">Success</el-button>
      <el-button text bg disabled loading type="info">Info</el-button>
      <el-button text bg disabled loading type="warning">Warning</el-button>
      <el-button text bg disabled loading type="danger">Danger</el-button>
    </div>
    <div v-for="i in 100" :key="i">{{ i }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref('')
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]
</script>
